<template>
	<view class="rank-page bgimg3">
		<u-navbar :title="$t('hhh.t151')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>
		<view class="bglg4 rounded-lg py-3 px-2 text-white fs-36 font-weight-bold">
			<view class="flex align-center justify-between spenders rank mb-4 px-3" @tap="navTo('/pages/rank/spenders')">
				<text>{{$t('hhh.t148')}}</text>
				<image src="/static/imgs/right4.png" mode="aspectFill" class="w-48 h-48"></image>
			</view>
			<view class="flex align-center justify-between players rank mb-4 px-3" @tap="navTo('/pages/rank/players')">
				<text>{{$t('hhh.t149')}}</text>
				<image src="/static/imgs/right4.png" mode="aspectFill" class="w-48 h-48"></image>
			</view>
			<view class="flex align-center justify-between guardians rank mb-4 px-3" @tap="navTo('/pages/rank/guardians')">
				<text>{{$t('hhh.t150')}}</text>
				<image src="/static/imgs/right4.png" mode="aspectFill" class="w-48 h-48"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.rank-page {
		.rank {
			height: 192rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center top;

			&.spenders {
				background-image: url('/static/imgs/rank1.png');
			}

			&.players {
				background-image: url('/static/imgs/rank2.png');
			}

			&.guardians {
				background-image: url('/static/imgs/rank3.png');
			}
		}
	}
</style>